<template>
  <div id="pictureDetail">
    <!-- 关键：用 v-if="picture.url" 确保有数据再渲染，避免提前访问 url 报错 -->
    <a-row :gutter="[16, 16]">
      <!-- 图片展示区 -->
      <a-col :sm="24" :md="16" :xl="18">
        <a-card title="图片预览">
          <a-image style="max-height: 600px; object-fit: contain" :src="picture.url" />
        </a-card>
      </a-col>
      <!-- 图片信息区 -->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息">
          <a-descriptions :column="1">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :size="24" :src="picture.user?.userAvatar" />
                <div>{{ picture.user?.userName }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ picture.name ?? '未命名' }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ picture.introduction ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ picture.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in picture.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ picture.picFormat ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽度">
              {{ picture.picWidth ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ picture.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ picture.picScale ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="大小">
              {{ formatSize(picture.picSize) }}
            </a-descriptions-item>
            <a-descriptions-item label="色彩">
              <a-space>
                {{ picture.picColor ?? '--' }}
                <div v-if="picture.picColor" :style="{
                  backgroundColor: toHexColor(picture.picColor),
                  width: '16px',
                  height: '16px',
                }">
                </div>
              </a-space>
            </a-descriptions-item>
          </a-descriptions>
          <a-space wrap>
            <a-button

              type="link"
              :href="`/picture/addPicture?id=${props.id}`"
              target="_blank"
            >
              <EditOutlined />
              编辑
            </a-button>
            <a-button @click="doDelete" style="margin-left: 16px">
              <DeleteOutlined />
              删除
            </a-button>
            <a-button  @click="doShare" style="margin-left: 16px">
              <ShareAltOutlined/>
              分享
            </a-button>
            <ShareModal ref="shareModalRef" :link="shareLink"/>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script setup lang="ts">
import { deletePicByIdUsingPost, userGetPicByIdUsingGet } from '@/api/fileController.ts'
import { computed, onMounted, ref } from 'vue'
import { message } from 'ant-design-vue'
import { formatSize } from '@/utils'
import { useLoginUserStore } from '@/stores/userLoginUserStore.ts'
import { EditOutlined, DeleteOutlined, ShareAltOutlined } from '@ant-design/icons-vue'
import { useRouter } from 'vue-router'
import { toHexColor } from '@/utils/color.ts'
import ShareModal from '@/components/ShareModal.vue'

const loginUser = useLoginUserStore()

const router = useRouter()

// 1. 给 reactive 初始空对象（避免 undefined，模板渲染时不报错）
const picture = ref<API.PictureVO>({})

// 2. props 接收路由参数（简化版已验证能拿到 id，这里保留）
const props = defineProps({
  id: {
    type: String,
    required: true,
  },
})

/**
 * 根据 id 查询图片信息（修复响应式和错误处理）
 */
async function getPictureById() {
  const pictureId = props.id
  // 先校验 id 是否存在（防御性编程）
  if (!pictureId) {
    message.error('图片 ID 无效，无法查询详情')
    return
  }

  try {
    // 2. 打印请求 ID，确认参数正确（方便排查）
    console.log('请求图片详情的 ID：', pictureId)
    // 3. 调用接口（确保接口参数格式正确，比如 id 是字符串）
    const resp = await userGetPicByIdUsingGet({ id: pictureId })

    // 4. 打印接口返回，确认数据格式（关键！排查接口是否返回正确数据）
    console.log('接口返回的图片数据：', resp.data)

    // 5. 校验接口响应（按后端规范调整 code 值）
    if (resp.data.code === 0 && resp.data.data) {
      // 🌟 关键修复：用 Object.assign 合并数据（保持 reactive 响应式）
      // 不能直接写 picture = resp.data.data（会丢失响应式）
      // Object.assign(picture, resp.data.data)
      picture.value = resp.data.data
    } else {
      // 后端返回错误信息（比如 id 不存在）
      message.error(`查询失败：${resp.data.message || '未知错误'}`)
    }
  } catch (error) {
    // 捕获网络错误（比如接口 404、500，或请求超时）
    console.error('查询图片详情时发生网络错误：', error)
    message.error('网络异常，无法获取图片详情，请稍后重试')
  }
}

/**
 * 校验编辑权限
 */
// const canEdit = computed(() => {
//   const user = loginUser.loginUser
//   console.log(user)
//   if (user === null) {
//     return false
//   }
//   //本人或管理员可以编辑
//   return user.id === picture.value.userId || user.role === 'admin'
// })

/**
 * 根据ID删除
 */
async function doDelete() {
  const pictureId = props.id
  const resp = await deletePicByIdUsingPost( {id:pictureId})
  if (resp.data.code === 0) {
    message.success('删除成功')
    await router.push('/')
  } else {
    message.error('删除失败')
  }
}



const shareModalRef = ref()
const shareLink = ref<string>()

// 分享
const doShare = (picture: API.PictureVO, e: Event) => {
  shareLink.value = `${window.location.protocol}//${window.location.host}/picture/detail/${props.id}`
  if (shareModalRef.value) {
    shareModalRef.value.handleOpen()
  }
}

// 3. 组件挂载时执行查询（简化版已验证 onMounted 会触发）
onMounted(() => {
  console.log('详情页组件已挂载，开始查询图片数据')
  getPictureById()
})
</script>

<style scoped></style>
